import React, {Component} from 'react';
/* react-redux 导入一个 connect 函数，该函数可以让我们的组件和仓库产生一个关联性*/
import {connect} from "react-redux";
import {add, sub, asynCAdd} from "../../store/actionCreated";

class CartList extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h2>CartList组件-兄弟关系</h2>
                <hr/>
                {
                    this.props.cartList.map(item => {
                        return (
                            <ul key={item.id}>
                                <li>序号：{item.id}</li>
                                <li>名称：《{item.goodsName}》</li>
                                <li>价格 ¥：{item.goodsPrice}</li>
                                <li>
                                    <button onClick={this.props.sub.bind(this, item.id)}>-
                                    </button>
                                    <i>{item.number}</i>
                                    <button onClick={this.props.cartAdd.bind(this, item.id)}>+</button>
                                    <button onClick={this.props.asynCAdd.bind(this, item.id)}>异步增加(代表和后台api进行交互)</button>
                                </li>
                                <li>小计：{item.goodsPrice * item.number}</li>
                            </ul>
                        )
                    })
                }

            </div>
        );
    }
}

/**
 * connect 函数可以让我们组件和仓库产生关联，该函数接收一个函数作为参数。
 *
 * 1. 接收的函数存在一个 state 参数，该参数就是我们的仓库数据
 *
 * 2. 接收的函数的返回值会被隐射到当前组件的属性上面
 * this.props.cartList = state;
 *
 * 3. connect还会把 dispatch 隐射到当前的组件属性 props 上面
 * this.props.dispatch = store.dispatch;
 *
 * 4. connect会自动我们进行订阅操作
 *
 *
 * 5. connect 可以接收第二个参数，代表是把 actionCreated 直接映射到当前组件的props上面
 */

/*
* 1. connect 操作我们可以简写
*
* 2. connect返回值是一个函数，该函数接受一个组件作为参数，然后一个新的 组件，这个函数我们称之为高阶组件
* */

export default connect((state) => {
    return {
        cartList: state.cartData,
    }
    // this.props.cartAdd this.props.sub
}, {'cartAdd': add, sub, asynCAdd})(CartList);
